<script setup lang="ts">
import useSetting from '@renderer/composables/useSetting'
import { reactive, ref } from 'vue'
import { type TabsPaneContext } from 'element-plus'
const tabList = reactive([
  {
    name: '整体预算',
    index: 2,
  },
  {
    name: '整体预算2',
    index: 6,
  },
  {
    name: '基装预算',
    index: 1,
  },
  {
    name: '主材预算',
    index: 3,
  },
  {
    name: '成品定制预算',
    index: 4,
  },
  {
    name: '优惠清单',
    index: 5,
  },
])
const activeName = ref('整体预算')
const initType = ref(2)
const setInfoForm = ref<ComputeInfoModel>({
  title: '',
  remark: [],
})
const handleSave = async () => {
  let remark = [] as string[]
  setInfoForm.value.remark.forEach((item) => {
    remark.push(item.value)
  })
  await calculateTableSet({
    type: initType.value,
    title: setInfoForm.value.title,
    remark: JSON.stringify(remark),
  })
}
const handleClick = async (tab: TabsPaneContext, _event: Event) => {
  const tabInfo = tabList.find((item) => item.name === tab.props.name)
  setInfoForm.value = {
    title: '',
    remark: [],
  }
  initType.value = tabInfo?.index!
  await initPage()
}
const initPage = async () => {
  await getCalculateTableSet({
    type: initType.value,
  })
  if (computeInfo.value) {
    setInfoForm.value.title = computeInfo.value.title
    if (computeInfo.value.remark == '') {
      for (let i = 0; i < 10; i++) {
        setInfoForm.value.remark.push({ value: '' })
      }
    } else {
      JSON.parse(computeInfo.value.remark).forEach((item) => {
        setInfoForm.value.remark.push({ value: item })
      })
    }
  } else {
    setInfoForm.value.title = ''
    for (let i = 0; i < 10; i++) {
      setInfoForm.value.remark.push({ value: '' })
    }
  }
}
const { computeInfo, getCalculateTableSet, calculateTableSet } = useSetting()

await initPage()
</script>

<template>
  <main
    class="bg-white flex flex-col justify-between rounded-md overflow-y-auto"
    style="height: -webkit-fill-available">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in tabList" :key="index">
        <div class="flex flex-col px-40">
          <div class="font-bold text-black text-2xl text-center">{{ activeName }}</div>
          <el-form label-width="auto">
            <el-form-item label="标题" required labelPosition="top">
              <el-input v-model="setInfoForm.title" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注" required labelPosition="top">
              <div class="flex flex-col gap-3 flex-1">
                <el-input
                  v-model="remarkItem.value"
                  placeholder="请输入"
                  v-for="(remarkItem, remarkIndex) in setInfoForm?.remark"
                  :key="remarkIndex" />
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="flex justify-center">
      <button class="save-button" @click="handleSave">保存设置</button>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.save-button {
  @apply text-white px-16 py-3 rounded-md;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
</style>
